<!doctype html>
<html>
  <head>
    <title>PGlite Worker Example</title>
    <link rel="stylesheet" href="./styles.css" />
    <script src="./utils.js"></script>
    <script type="importmap">
      {
        "imports": {
          "@electric-sql/pglite/worker": "../dist/worker/index.js"
        }
      }
    </script>
  </head>
<body>
<h1>PGlite OPFS Example</h1>
<div class="script-plus-log">
<div class="scripts">
<h2>Worker Thread - <code>opfs-worker.js</code></h2>
<div class="script" rel="./opfs-worker.js"></div>
<h2>Main Thread</h2>
<script type="module">
import { PGliteWorker } from "@electric-sql/pglite/worker";

console.log("Starting...");
const start = performance.now();
const pg = new PGliteWorker(
  new Worker(new URL("./opfs-worker.js", import.meta.url), {
    type: "module",
  })
);

console.log("Waiting for ready...");
await pg.waitReady;

console.log("Ready! Took", performance.now() - start, "ms");

console.log("Creating table...");
await pg.exec(`
  CREATE TABLE IF NOT EXISTS test (
    id SERIAL PRIMARY KEY,
    name TEXT
  );
`);

console.log("Inserting data...");
await pg.exec("INSERT INTO test (name) VALUES ('test');");

console.log("Selecting data...");
const res = await pg.exec(`
  SELECT * FROM test;
`);

console.log(res);

// Transaction example:
console.log("Transaction example...");
await pg.transaction(async (tx) => {
  await tx.exec("INSERT INTO test (name) VALUES ('test2');");
  await tx.exec("INSERT INTO test (name) VALUES ('test3');");
});

console.log("Selecting data...");
const res2 = await pg.exec(`
  SELECT * FROM test;
`);

console.log(res2);
</script>
</div>
<div id="log"></div>
</div>
</body>
</html>
